<template>
    <div>
        <n-card v-if="dataList.length" v-for="item in dataList" :title="item.title">
            <template v-if="item.createdAt" #header-extra>
                发布于：<n-time :time="new Date(item.createdAt)"/>
            </template>
            <n-image v-if="item.images" width="200" v-for="img in item.images.split(',')" :src="getImageUrl(img)"/>
            <p class="text-centent" >{{ item.content }}</p>
            <template v-if="!item.isAnonymous" #footer>
                <div style="display: flex; align-items: center; justify-content: space-between">
                    <n-tag size="large" round :bordered="false">
                        {{ item.nickName }}
                        <template #avatar>
                            <n-avatar round :src="getImageUrl(item.avatar)"/>
                        </template>
                    </n-tag>
                    <n-tag :bordered="false" :type="item.type ? 'warning' : 'success'">{{ item.type ? '建议': '心愿' }}</n-tag>
                    <n-tooltip trigger="hover" v-if="item.isExposure">
                        <template #trigger>
                            <n-button type="warning" strong secondary @click="sendHotspot(item.id, false)">取消热点</n-button>
                        </template>
                        热点更新于：<n-time :time="new Date(item.exposureTime)"/>
                    </n-tooltip>
                    <n-button type="error" strong secondary @click="sendHotspot(item.id, true)" v-else>热点</n-button>
                </div>
            </template>
        </n-card>
        <n-pagination
            v-if="pageInfo.page.total > 0 && pageInfo.page.total > pageInfo.page.pageSize"
            v-model:page="pageInfo.page.pageNum"
            v-model:page-size="pageInfo.page.pageSize"
            :item-count="pageInfo.page.total"
            :on-update:page="updatePageNum"
            :on-update:page-size="updatePageSize"
        />
        <n-empty v-if="!dataList.length" description="你什么也找不到" />
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { Wish } from "@/views/admin/wish/types";
import {wishPage, hotspot} from "@/api/wish/wish";
import { getImageUrl } from "@/utils/wish";

export default defineComponent({
    setup() {
        const dataList = ref<Wish[]>([]);
        const pageInfo = reactive({
            page: {
                pageNum: 1,
                pageSize: 10,
                sortName: 'is_exposure desc, exposure_time desc',
                total: 0,
            },
            wish: {
                keywords: ``
            }
        });

        onMounted(() => {
            findPage();
        });

        const findPage = async () => {
            const { code, rows, total }: any = await wishPage(pageInfo);
            if (code == 200) {
                dataList.value = rows;
                pageInfo.page.total = total;
            }
        }

        const updatePageNum = (pageNum: number) => {
            pageInfo.page.pageNum = pageNum;
            findPage();
        }

        const updatePageSize = (pageSize: number) => {
            pageInfo.page.pageSize = pageSize;
            findPage();
        }

        /**
         * 将心愿/建议送上热点数据
         * @param id
         * @param isExposure
         */
        const sendHotspot = (id: number, isExposure: boolean) => {
            hotspot({ id, isExposure, exposureTime: new Date()}).then(({ code }: any) => {
                 if (code == 200) {
                     findPage();
                 }
            });
        }

        return {
            dataList,
            pageInfo,
            findPage,
            updatePageNum,
            updatePageSize,
            getImageUrl,
            sendHotspot
        }
    }
});
</script>
<style scoped lang="scss">
.n-pagination {
    float: right;
    margin-top: 10px;
}
.n-card {
    margin-bottom: 15px;
}
.n-image {
    float: right;
}
.text-centent {
    // 首行缩进2个字
    text-indent: 2em;
    word-break: break-all;
    line-height: 2;
    font-size: 16px;
}
</style>
